<template>
    <div id="feed_back">
        <div class="container">
            <div class="handle-box">
                <!-- <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button> -->
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="关键字">
                        <el-input
                            v-model="query.description"
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            placeholder="请输入关键字"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select
                            v-model="query.feedbackType"
                            @change="handleSearch"
                            :clearable="true"
                            @clear="handleSearch"
                            placeholder="请选择类型"
                            class="handle-select mr10"
                        >
                            <el-option key="0" label="播放问题" :value="0"></el-option>
                            <el-option key="1" label="歌单问题" :value="1"></el-option>
                            <el-option key="2" label="账户问题" :value="2"></el-option>
                            <el-option key="3" label="会员付费问题" :value="3"></el-option>
                            <el-option key="4" label="客户端问题" :value="4"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="时间">
                        <div class="block w">
                            <el-date-picker
                                @change="handleSearch"
                                class="w"
                                v-model="date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </div>
                    </el-form-item>

                    <el-form-item label="">
                        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button size="mini" type="warning" icon="el-icon-refresh" @click="handleSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="ID" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="内容" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.description }}</template>
                </el-table-column>

                <el-table-column label="类型" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.feedbackType == 0
                            ? '播放问题'
                            : scope.row.feedbackType == 1
                            ? '歌单问题'
                            : scope.row.feedbackType == 2
                            ? '账户问题'
                            : scope.row.feedbackType == 3
                            ? '会员付费问题'
                            : scope.row.feedbackType == 4
                            ? '客户端问题'
                            : ''
                    }}</template>
                </el-table-column>

                <!-- <el-table-column label="图片" width="auto" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.imagePaths ? `${baseUrl}/api/stream/audio?path=${scope.row.imagePaths[0]}` : ''"
                            :preview-src-list="[scope.row.imagePaths ? `${baseUrl}/api/stream/audio?path=${scope.row.imagePaths[0]}` : '']"
                        ></el-image>
                    </template>
                </el-table-column> -->

                <el-table-column label="提交人" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.uid }}</template>
                </el-table-column>

                <el-table-column label="联系电话" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>

                <el-table-column label="提交时间" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.submtTime }}</template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 意见反馈详情弹出框 -->
        <el-dialog title="意见反馈详情" :visible.sync="detailVisible" width="500">
            <div class="">
                <div class="left">
                    <p>ID: {{ form.id }}</p>
                    <p>提交人: {{ form.uid }}</p>
                    <p>
                        类型:
                        {{
                            form.feedbackType == 0
                                ? '播放问题'
                                : form.feedbackType == 1
                                ? '歌单问题'
                                : form.feedbackType == 2
                                ? '账户问题'
                                : form.feedbackType == 3
                                ? '会员付费问题'
                                : form.feedbackType == 4
                                ? '客户端问题'
                                : ''
                        }}
                    </p>
                    <p class="img">
                        <span>图片:</span>
                        <el-image
                            class="table-td-thumb"
                            v-if="form.imagePaths && form.imagePaths.length > 0"
                            v-for="(url, index) in form.imagePaths"
                            :key="index"
                            :src="url ? decodeURIComponent(form.imagePaths[0]) : ''"
                            alt=""
                            :style="{ 'margin-left': index >= 1 ? '10px' : '0' }"
                            :preview-src-list="[url ? decodeURIComponent(form.imagePaths[0]) : '']"
                        ></el-image>
                        <!-- <img
                            v-if="form.imagePaths && form.imagePaths.length > 0"
                            v-for="(url, index) in form.imagePaths"
                            :key="index"
                            :src="url ? decodeURIComponent(form.imagePaths[0]) : ''"
                            alt=""
                            :style="{ 'margin-left': index >= 1 ? '10px' : '0' }"
                        /> -->
                    </p>
                </div>
                <div class="right">
                    <p>联系电话: {{ form.mobile }}</p>
                    <p>设备型号: {{ form.headersInfo ? form.headersInfo['dev-model'] : '' }}</p>
                    <p>app版本: {{ form.headersInfo ? form.headersInfo['dev-app-version'] : '' }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { fetchData } from '@/api/index';
import NProgress from 'nprogress';
export default {
    name: 'FeedBack',

    data() {
        return {
            baseUrl: process.env.VUE_APP_SRC1,
            query: {
                feedbackType: null,
                description: null,
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            detailVisible: false,
            pageTotal: 0,
            date: null,
            form: {}
        };
    },
    created() {
        this.getData();
    },
    methods: {
        async getData() {
            try {
                NProgress.start();
                const url = '/feedback/list';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        feedbackType: this.query.feedbackType,
                        description: this.query.description,
                        startTime: this.date
                            ? this.$formatDate('Y-M-D', this.$standardDateToTimstamp(this.date[0]), 'yyyy-mm-dd', '-')
                            : null,
                        endTime: this.date ? this.$formatDate('Y-M-D', this.$standardDateToTimstamp(this.date[1]), 'yyyy-mm-dd', '-') : null
                    }
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data.content && res.data.content.length && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.submtTime = this.$dateFormat(item.submtTime, '', '-');
                    });
                    this.tableData = res.data.content;
                    this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.tableData = [];
                    this.pageTotal = 0;
                }
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
            // fetchData(this.query).then(res => {
            //     console.log(res);
            //     this.tableData = res.list;
            //     this.pageTotal = res.pageTotal || 50;
            // });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },

        // 详情
        handleDetail(index, row) {
            // this.idx = index;
            // this.form = row;
            this.detailVisible = true;

            this.getDataById(row.id);
        },
        async getDataById(id) {
            try {
                NProgress.start();
                const url = '/feedback/info';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        id
                    }
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                this.form = this.$chooseFields(
                    res.data,
                    ['id', 'uid', 'description', 'feedbackType', 'imagePaths', 'mobile', 'headersInfo'],
                    {},
                    { id: '', uid: '', description: '', feedbackType: '', imagePaths: '', mobile: '', headersInfo: '' }
                );
                console.log(this.form);
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 保存编辑
        // saveEdit() {
        //     this.detailVisible = false;
        //     this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        //     this.$set(this.tableData, this.idx, this.form);
        // },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    }
};
</script>

<style lang="scss">
.el-image-viewer__wrapper {
    .el-image-viewer__canvas {
        .el-image-viewer__img {
            max-height: 40% !important;
            max-width: 40% !important;
        }
    }
}
#feed_back {
    .table-header {
        .cell {
            white-space: nowrap !important;
        }
    }
    .handle-box {
        margin-bottom: 20px;
        .el-form {
            display: grid;
            grid-auto-flow: column;
            justify-content: flex-start;
            .el-form-item {
                width: 95%;
                white-space: nowrap;
                .el-form-item__content {
                    .el-select,
                    .handle-input {
                        width: 100%;
                    }
                }
            }
        }
    }
    .el-dialog__body {
        & > div {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 40px 0;
            .left {
                p {
                    margin: 0;
                    padding: 0;
                    margin-bottom: 10px;
                    &.img {
                        span {
                            vertical-align: top;
                            margin-right: 10px;
                        }
                        .table-td-thumb {
                            vertical-align: top;
                            width: 100px;
                            height: 100px;
                        }
                    }
                }
            }
            .right {
                p {
                    margin: 0;
                    padding: 0;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    // .table-td-thumb {
    //     //  display: block;
    //     // margin: auto;
    //     // width: 40px;
    //     // height: 40px;
    // }
}
</style>
